/**
 * 起始页面
 */

const path = require('path');

import Pubsub from '../../helper/Pubsub.js';
import State from '../../helper/State.js';

class PageStart {
  constructor($wrapper) {
    const _this = this;

    _this.$wrapper = $wrapper;

    // 历史记录模板
    _this.tplHistoryItem = `<p><a href="javascript:void(0)" class="history-file" title="{{filePath}}">{{fileName}}</a>`;

    // 历史记录为空的模板
    _this.tplHistoryEmpty = `<p class="mdui-text-color-theme-secondary">无最近使用的文件</p>`;

    _this.tplHistoryMore = '<!--<p><a href="javascript:voud(0)" class="more-history">更多…</a> <span class="mdui-text-color-theme-secondary">(Ctrl + 4)</span></p>-->';

    // 页面模板
    _this.tpl =
`<div class="mdui-container mdui-typo content">

  <div class="mdui-typo-display-1 mdui-p-t-5">小善 Markdown 阅读器</div>
  <div class="mdui-typo-subheading-opacity">最轻的 Markdown 文档阅读体验</div>

  <div class="mdui-row-xs-1 mdui-row-sm-2 mdui-m-t-5">
    <div class="mdui-col">
      <div class="mdui-typo-headline mdui-m-t-5">开始</div>
      <p><a href="javascript:void(0)" class="open-file">打开文件</a> <span class="mdui-text-color-theme-secondary">(Ctrl + O)</span></p>
      <p><a href="javascript:void(0)" class="open-folder">打开文件夹</a> <span class="mdui-text-color-theme-secondary">(Ctrl + F)</span></p>

      <div class="mdui-typo-headline mdui-m-t-5">最近</div>
      <div class="history">{{history}}</div>
    </div>
    <div class="mdui-col">
      <div class="mdui-typo-headline mdui-m-t-5">小善的产品</div>
      <p><a href="http://99xs.com" target="_blank">久小善官网</a></p>
      <p><a href="http://cbj.99xs.com/" target="_blank">残保金一站式服务</a></p>
      <p><a href="http://job.99xs.com/" target="_blank">新能力者招聘平台</a></p>

      <div class="mdui-typo-headline mdui-m-t-5">帮助</div>
      <p><a href="javascript:void(0)" mdui-dialog="{target: '#page-start-shartcut'}">快捷键查询</a></p>
      <p><a href="javascript:void(0)" class="markdown-manual">Markdown 语法手册</a></p>
    </div>
  </div>
</div>

<div class="mdui-dialog" id="page-start-shartcut">
  <div class="mdui-dialog-title">快捷键</div>
  <div class="dialog mdui-dialog-content mdui-typo">
    <p><label>打开文件</label> <code>Ctrl + O</code></p>
    <p><label>打开文件夹</label> <code>Ctrl + F</code></p>
    <p><label>打开开发者工具</label> <code>Ctrl + Shift + I</code></p>
    <p><label>全屏</label> <code>F11</code></p>
    <p><label>回到起始页</label> <code>Ctrl + 1</code></p>
    <p><label>切换文件夹侧边栏状态</label> <code>Ctrl + 2</code></p>
    <p><label>切换文章目录侧边栏状态</label> <code>Ctrl + 3</code></p>
    <p><label>切换历史记录侧边栏状态</label> <code>Ctrl + 4</code></p>
    <p><label>切换主题</label> <code>Ctrl + 5</code></p>
    <p><label>打开设置界面</label> <code>Ctrl + 6</code></p>
  </div>
</div>`;
    _this.$wrapper.html(_this.tpl).data('rendered', true);
    _this.$history = _this.$wrapper.find('.history');
    _this.renderHistory();

    /**
     * 打开文件后，更新历史记录
     */
    Pubsub.subscribe('file-opened', (fileInfo) => {
      _this.renderHistory();
    });

    /**
     * 清空历史记录后，删除元素
     */
    Pubsub.subscribe('clear-history', () => {
      _this.renderHistory();
    });

    /**
     * 点击文件选择按钮
     */
    $$(document).on('click', '#start .open-file', function() {
      Pubsub.emit('file-open');
    });

    /**
     * 点击文件夹选择按钮
     */
    $$(document).on('click', '#start .open-folder', function() {
      Pubsub.emit('folder-open');
    });

    /**
     * 点击历史记录的更多按钮
     */
    $$(document).on('click', '#start .more-history', function() {
      Pubsub.emit('sidebar-history-open');
    });

    /**
     * 点击历史记录项，打开文件
     */
    $$(document).on('click', '#start .history-file', function() {
      let $this = $$(this);
      let fileInfo = {
        fileName: $this.text(),
        filePath: $this.attr('title')
      };

      State.addHistory(fileInfo);

      Pubsub.emit('file-opened', fileInfo);
      Pubsub.emit('sidebar-directory-open');
    });

    /**
     * 打开 Markdown 语法手册
     */
    $$(document).on('click', '#start .markdown-manual', function() {
      Pubsub.emit('selected-file', path.join(__dirname, './demo/Markdown 语法手册.md'));
    });
  }

  /**
   * 重新渲染历史记录列表
   */
  renderHistory() {
    const _this = this;
    const filesHistory = State.getHistory();

    if (filesHistory.length) {
      let filesHTML = '';

      $$.each(filesHistory, (i, file) => {
        // 最多只显示 10 条
        if (i >= 10) {
          return false;
        }

        filesHTML +=
          _this.tplHistoryItem
            .replace('{{fileName}}', file.fileName)
            .replace('{{filePath}}', file.filePath);
      });

      filesHTML += _this.tplHistoryMore;

      _this.$history.html(filesHTML);
    } else {
      _this.$history.html(_this.tplHistoryEmpty);
    }
  }
}

export default PageStart;